<template>
  <div ref="wrapper" class="list">
    <div >
          <div class="border-topbottom title">当前城市</div>
            <div class="city">
              <div class="button-city">上海</div>
            </div>
          <div class="border-topbottom title">热门城市</div>
            <div class="city">
              <div class="button-city">上海</div>
            </div>

        <div v-for="(item, key) of cities" :key="key" :ref="key">
          <div class="border-topbottom title">{{ key }}</div>
            <div class="item-list border-bottom" >
              <div class="item"
              v-for="city of item "
              :key="city.id">{{city.name}}</div>
            </div>
        </div>
     </div>
  </div>

</template>

<script>
import Bscroll from 'better-scroll'

export default {
  name: 'HomeList',
  props: {
    cities: Object,
    hotCities: Array
  },
  data () {
    return {

    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
    console.log(this.scroll, '222')
  }
}
</script>

<style lang="stylus" scoped>
 @import '~styles/varibles.styl';
 .list
   overflow:hidden
   position:absolute
   top: 1.58rem
   left:0
   right: 0
   bottom: 0
  .title
   height 0.44rem
   line-height: .44rem
   font-size: .26rem
   background: #eee
   padding: 0 .2rem
   color:#666
  .city
    display: flex
    flex-wrap: wrap
    padding: .1rem;
  .button-city
    width:30%
    margin: .1rem
    padding: .1rem 0
    box-sizing: border-box
    border-radius: .06rem
    color: #666
    border:.02rem solid #ccc
    text-align: center
  .item
    line-height: .72rem
    font-size: .3rem
    padding-left: .2rem
</style>
